<template>
	<view class="my-integral">
		<!-- 	<view :style="{ background: barStyle.background, height: barStyle.height }" class="top-bar">
			<view class="bar-con">
				<uni-icon name="arrow-left" size="24" color="#fff" @click="goto"></uni-icon>
				<view class="bar-text">积分乐园</view>
			</view>
		</view> -->
		<image src="/static/img/mine/jifen-bg1.png" style="width:750px"></image>
		<view class="integral-content">
			<view class="num-box">
				<view class="num-title">积分</view>
				<view class="num-value">1999</view>
			</view>
			<view class="box-1">
				<view class="box-head">
					<view class="head-title">签到领积分</view>
					<view class="head-value">连续签到两天</view>
				</view>
				<view class="list-box">
					<view v-for="item in 7" :key="item" class="item-box" :class="{ finally: item < totalDays }" @click="clickHandle">
						<view class="day">第{{ item + 1 }}天</view>
						<view class="icon">
							<uni-icon v-if="item < 6" name="/static/mine/jifen-1.png" size="40"></uni-icon>
							<!-- <image v-else src="/static/img/mine/jifen-2.png" width="180rpx" height="128rpx"></image> -->
						</view>
						<view class="tips">{{ item < 6 ? '10积分' : '神秘大礼包' }}</view>
					</view>
				</view>
			</view>

			<view class="box-2">
				<view class="head-title">积分明细</view>
				<view class="list-box">
					<view v-for="item in 10" :key="item" class="box-item">
						<view class="item-head">
							<view class="title">积分充值</view>
							<view class="value">
								<view class="value-num">+200</view>
								<uni-icon name="/static/img/mine/jifen-1.png" size="20"></uni-icon>
							</view>
						</view>
						<view class="label">2022-02-02 12:30:23</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			barStyle: {
				top: '96rpx',
				background: 'transparent',
				height: '100rpx'
			},

			totalDays: 3 // 签到天数
		}
	},
	computed: {},

	// onShow() {
	// 	const menuInfo = uni.getMenuButtonBoundingClientRect()
	// 	console.log(menuInfo)
	// 	this.barStyle.top = menuInfo.top + 'px'
	// 	this.barStyle.height = menuInfo.top + 32 + 'px'
	// },

	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		// this.scrollTop = e.scrollTop;
		this.throttle()(e)
	},

	watch: {},
	methods: {
		walletInfo() {},
		myIntegral() {},
		couponInfo() {},
		myCollection() {},
		personalSetting() {},
		gotoLogin() {
			uni.navigate({ url: '/pages/login/pages/index' })
		},
		jianlitou(val) {
			console.log(val)
		},
		goto() {
			console.log('跳转')
			uni.navigateBack()
		},

		// 签到
		clickHandle() {
			if (this.totalDays === 7) return
			this.totalDays++
		},

		// 节流函数
		throttle() {
			const that = this
			let timer = null
			return function(e) {
				if (timer) {
					return
				}
				timer = setTimeout(() => {
					if (e.scrollTop > 80) {
						that.barStyle.background = '#F66F39'
					} else {
						that.barStyle.background = 'transparent'
					}
				}, 200)
			}
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
}
</style>

<style scoped lang="scss">
.my-integral {
	background-color: #f7f7f7;
	padding-bottom: 32rpx;
	.top-bar {
		position: fixed;
		// top: 96rpx;
		width: 100%;
		z-index: 999;
		text-align: center;
		.bar-con {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 0;
			height: 64rpx;
			.bar-text {
				margin-left: 228rpx;
				color: #fff;
				font-size: 34rpx;
				line-height: 64rpx;
			}
		}
	}
	.integral-content {
		padding: 0 24rpx;
		position: relative;
		.num-box {
			color: #fff;
			position: absolute;
			top: -156rpx;
			left: 40rpx;
			.num-title {
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.num-value {
				font-size: 64rpx;
				font-weight: 700;
				line-height: 90rpx;
			}
		}
		.box-1 {
			width: 702rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: -136rpx;
			.box-head {
				padding: 24rpx;
				display: flex;
				justify-content: space-between;
				height: 52rpx;
				align-items: center;
				.head-title {
					font-size: 32rpx;
					color: #000;
				}
				.head-value {
					color: #000;
					opacity: 0.45;
					font-size: 24rpx;
				}
			}
			.list-box {
				display: flex;
				padding: 16rpx;
				flex-wrap: wrap;
				padding-bottom: 8rpx;
				.item-box {
					margin: 0 8rpx 16rpx;
					width: 150rpx;
					height: 180rpx;
					background-color: #fafafa;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					border-radius: 8rpx;
					.day {
						font-size: 24rpx;
						color: #262626;
						margin-top: 10rpx;
					}
					.tips {
						font-size: 20rpx;
						color: #bfbfbf;
					}
					&.finally {
						background: rgba(254, 187, 63, 0.1);
						color: #ffaa00;
					}
					&:last-child {
						width: 322rpx;
						position: relative;
						.day {
							position: absolute;
							top: 16rpx;
							left: 32rpx;
							margin: 0;
						}
						.tips {
							position: absolute;
							top: 60rpx;
							left: 32rpx;
						}
						.icon {
							position: absolute;
							top: 36rpx;
							left: 128rpx;
						}
					}
				}
			}
		}

		.box-2 {
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 24rpx;
			.head-title {
				height: 108rpx;
				line-height: 108rpx;
				text-align: center;
				font-size: 32rpx;
				color: #000;
			}
			.list-box {
				padding: 0 32rpx;
				.box-item {
					box-sizing: border-box;
					height: 144rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
					padding-top: 32rpx;
					.item-head {
						display: flex;
						justify-content: space-between;
						color: rgba(0, 0, 0, 0.85);
						.title {
							font-size: 28rpx;
						}
						.value {
							display: flex;
							align-items: center;
							.value-num {
								font-size: 32rpx;
								font-weight: 700;
								margin-right: 6rpx;
							}
						}
					}
					.label {
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.45);
					}

					&:last-child {
						border: none;
					}
				}
			}
		}
	}
}
</style>
